<template>
  <div class="masage">
    <h2>{{ this.sort_name }}</h2>
    <!-- 性别分类 -->
    <div class="sex_sort">
      <span
        v-for="(index, key) in sex"
        :key="index.key"
        @click="sex_sort(index.key)"
        :class="{ bg: active_1 == index.key }"
        >{{ index.value }}</span
      >
    </div>
    <!-- 地区分类 -->
    <div class="all_sort">
      <span
        v-for="(index, key) in types"
        :key="index.key"
        @click="all_sort(index.key)"
        :class="{ bg: active_2 == index.key }"
        >{{ index.value }}</span
      >
    </div>
    <!-- 歌手图片、名字 -->
    <div class="all_info">
      <div
        class="all_list"
        v-for="(index, id) in all"
        :key="index.singerid"
        @mouseenter="m_en(index.singerid)"
        @mouseleave="m_le"
        @click="go_info(sort, index.singerid)"
      >
        <img :src="index.imgurl" alt="" />
        <!-- 鼠标移入背景 -->
        <div class="showdow" :class="{ shw: singerid == index.singerid }">
          <span class="iconfont icon-hear"></span>
          <span class="iconfont icon-24gl-play"></span>
        </div>
        <span
          @click="go_info(index.singerid)"
          class="name"
          @mouseenter="n_en(index.singerid)"
          @mouseleave="n_le"
          :class="{ col: co == index.singerid }"
          >{{ index.singername }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import song from '@/store/song';
import { mapGetters, mapState } from "vuex";
export default {
  name: "singer_all",
  data() {
    return {
      //请求参数
      sextype: 0,
      sort: this.$route.query.sort,
      size: 100,
      type: 0,
      //控制性别分类
      active_1: 0,
      // 控制地区分类
      active_2: 0,
      // 控制鼠标经过--动态歌手背景背景
      singerid: 0,
      //控制鼠标经过歌手名颜色
      co: 0,
      //接收(query传参)分类名
      sort_name: this.$route.query.sort_name,
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    //获取全部歌手分类
    async getdata() {
      try {
        await this.$store.dispatch("hall_singer", {
          sextype: this.sextype,
          sort: this.sort,
          size: this.size,
          type: this.type,
        });
      } catch (error) {
        alert(error.message);
      }
    },
    //性别分类
    sex_sort(index) {
      //动态背景
      this.active_1 = index;
      //歌手分类内容
      this.sextype = index;
      this.getdata();
    },
    //地区分类
    all_sort(index) {
      this.active_2 = index;
      this.type = index;
      this.getdata();
    },
    //动态歌手背景背景
    m_en(index) {
      this.singerid = index;
    },
    m_le() {
      this.singerid = 0;
    },
    //动态歌手名颜色
    n_en(index) {
      this.singerid = 0;
      this.co = index;
    },
    n_le() {
      this.co = 0;
    },
    //前往歌手详情
    go_info(index_1, index) {
      this.$router.push({
        name: "singer_info",
        query: { identify: index_1, singerid: index },
      });
    },
  },

  computed: {
    //获取vuex数据(处理异步请求)
    ...mapGetters(["enu", "all_info"]),
    sex() {
      return this.enu.sextypes || {};
    },
    types() {
      return this.enu.types || {};
    },
    all() {
      return this.all_info || {};
    },
  }
};
</script>

<style lang='less'>
.masage {
  display: flex;
  flex-wrap: wrap;
  h2 {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .all_sort,
  .sex_sort {
    display: flex;
    justify-content: space-between;
    margin-right: 500px;
    margin-bottom: 10px;
    span {
      cursor: pointer;
      display: block;
      width: 100px;
      height: 30px;
      line-height: 30px;
      border-radius: 15px;
      text-align: center;
      background-color: #f9f9f9;
      border: 1px solid #e3e3e3;
    }
    .bg {
      background-color: #00a9ff;
      color: #fff;
    }
  }
  .all_sort {
    margin-right: 100px;
  }
  .all_info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .all_list {
      cursor: pointer;
      width: 18%;
      border-radius: 90px;
      height: 180px;
      margin-bottom: 50px;
      text-align: center;
      position: relative;

      img {
        width: 180px;
        border-radius: 90px;
        margin-bottom: 5px;
      }
      .showdow {
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: 90px;
        top: 0;
        background: #000;
        opacity: 0.5;
        display: none;
        .icon-hear {
          position: absolute;
          color: #fff;
          font-size: 30px;
          width: 30px;
          top: 75px;
          left: 55px;
        }
        .icon-24gl-play {
          position: absolute;
          color: #fff;
          font-size: 30px;
          width: 30px;
          top: 75px;
          left: 95px;
        }
      }
      .shw {
        display: block;
      }
      .col {
        color: #00a9ff;
      }
    }
    .all_list:last-child:nth-child(5n-1) {
      margin-right: 205px;
    }
    .all_list:last-child:nth-child(5n-2) {
      margin-right: 410px;
    }
    .all_list:last-child:nth-child(5n-3) {
      margin-right: 615px;
    }
  }
}
</style>